<template>
	<div class="task-reporting">
		<zk-searcher v-model="query" :options="searchColumns" />
		<w-block class="body" title="预警信息列表" style="margin-top: 10px">
			<zk-table
				:columns="tableColumns"
				:service="service"
				:query="query"
				:actions="actions"
				@onSelectionChange="onSelection"
				@doOtherAction="doActions"
			>
			</zk-table>
		</w-block>
		<w-dialog :visible.sync="visible" height="auto" title="超时预警反馈">
			<el-form ref="modelForm" :model="model" label-width="160px">
				<el-row>
					<el-col v-for="item of modalColumns" :key="item.key" :span="item.span || 22">
						<el-form-item
							:label="item.label"
							:prop="item.key"
							:rules="item.required && [{ required: true, message: `请输入${item.label}`, trigger: ['blur'] }]"
						>
							<zk-item-pool
								v-model="model[item.key]"
								:option="{...item, disabled:item.disabled }"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="flex-end">
					<el-button type="default" @click="visible=false">取 消</el-button>
					<el-button type="primary" @click="submit">保 存</el-button>
				</div>
			</template>
		</w-dialog>
	</div>
</template>
<script>
import { TYPE_ENUM }                     from '@/common/zk-constants'
import { taskTimeoutWarning as service } from '@/services'
import SearchTableCRUDMixin              from '@/mixins/search-table-crud-mixin'

const columns = [
	{ 'label': '项目名称', 'key': 'project_name', table: true, search: true, form: true, required: true },
	{ 'label': '工作名称', 'key': 'work_name', table: true, form: true, required: true },
	{ 'label': '任务名称', 'key': 'task_name', table: true, form: true, required: true },
	{ 'label': '预警类型', 'key': 'cron_type', type: TYPE_ENUM.SELECT, storeKey: 'warningLevel', search: true, table: true, form: true, required: true, },
	{ 'label': '完成情况', 'key': 'done_state', table: true, search: true, type: TYPE_ENUM.SELECT, storeKey: 'finishState', form: true },
	{ 'label': '应完成日期', 'key': 'should_done_time', table: true, type: TYPE_ENUM.DATE_TIME, form: true },
	{ 'label': '预警日期', 'key': 'warn_time', table: true, type: TYPE_ENUM.DATE_TIME, form: true },
	{ 'label': '责任部门', 'key': 'duty_dept', table: true, type: TYPE_ENUM.SELECT, search: true, storeKey: 'orgList', },
]

const modalColumns = [
	{ 'label': '任务超时原因', 'key': 'reason_type', type: TYPE_ENUM.RADIO, storeKey: 'reasonType', required: true },
	{ 'label': '超时具体原因', 'key': 'overtime_content', type: TYPE_ENUM.TEXT_AREA, required: true },
	{ 'label': '整改措施', 'key': 'handle_content', type: TYPE_ENUM.TEXT_AREA, required: true },
]

const actions = [
	{ classname: 'primary', text: '办理', type: 'handle' },
	// {classname: 'warning', text: '反馈', type: 'feedback'},
]

export default {
	mixins : [SearchTableCRUDMixin],
	data() {
		return {
			columns,
			modalColumns,
			service,
			actions,
			isAddModal: false,
			query     : {
				done_state: '01'
			}
		}
	},
	watch  : {
		'model.reason_type': {
			deep: true,
			// immediate: true,
			handler(e) {
				// console.log('model.reason_type', e, this.modalColumns);
				const personInChargeIndex = this.modalColumns.findIndex(item => item.key == 'duty_person')
				const personInChargeItem = { 'label': '负责人', 'key': 'duty_person', required: true, }
				//选中内部原因的时候
				if (e === '01') {
					if (personInChargeIndex > -1) return;//如果this.modalColumns里面有负责人,返回
					this.modalColumns.splice(1, 0, personInChargeItem);//插入负责人
				}
				//非选中内部原因的情况下
				else {
					if (personInChargeIndex > -1) this.modalColumns.splice(personInChargeIndex, 1)//如果this.modalColumns里面有负责人,删除负责人
				}
			}
		},
	},
	methods: {
		doActions({ row, type }) {
			type === 'handle' && this.$router.push({
				path : `/tree-task/${ row.project_id }`,
				query: {
					projectName: row.project_name,
					taskPzId   : row.task_id
				}
			})
			if (type === 'feedback') {
				this.model = { ...row }
				this.visible = true
			}
		},
		async submit() {
			this.$refs.modelForm.validate(async (valid) => {
				if (valid) {
					await this.service.updateReason(this.model) && this.reload()
					this.model = {}
					this.visible = false
				}
			})
		},
	}
}
</script>
<style scoped lang="scss">
</style>

